<template>
  <div class="v-actual-resources-deployment g-jc-sb">
    <PropertyNodeLabel
      class="_list_scroll"
      :row="row"
      :selected="selected"
      :selectedModelId="selectedModelId"
      @clickItem="handleClickItem"
    />

    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      style="border-left: 1px solid #ddd; line-height: 14px"
      class="g-pd-4 g-flex-0"
    >
      <div>
        <img
          src="statics/icons/app/iconadd.png"
          class="g-pointer"
          @click="handleAdd"
        />
      </div>
      <div class="g-m-t-4">
        <img
          src="statics/icons/app/iconreduce.png"
          class="g-pointer"
          :class="{ 'is-disabled': !selectedModelId }"
          @click="handleRemove"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropertyRow } from "../../types";
import { ref, Ref, watch, inject } from "vue";
import PropertyNodeLabel from "../custom/PropertyNodeLabel.vue";
import { GanttAddExistingWindow } from "@/config/customSystemConfig/customWindows/ganttAddExistingWindow";
import { archService } from "@/modules/model/service/ArchService";
import { TableBaseConfig } from "@/modules/model/comps/station/graphTabs/diagramTableNew/config/toolBar";
import { ColumnData } from "@/mdesign-lib/mdesign-graph.umd.js";

const isModelDisabled = inject("isModelDisabled", ref(false)) as Ref<boolean>;

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  tableInfo?: {
    tableId: string;
    rowId: string;
    columns: ColumnData[];
    tableBaseConfig: TableBaseConfig;
  };
  tableElementDisabled?: boolean;
}>();

const selectedModelId = ref("");

watch(
  () => props.selected,
  val => {
    if (val === false) {
      selectedModelId.value = "";
    }
  }
);

const handleAdd = async () => {
  const row = props.row;
  const tableInfo = props.tableInfo;
  const projectId = app.activeProject!.id;
  console.log("tableInfo", tableInfo);
  const actualProjectMilestoneId = tableInfo?.columns.find(item => item.isHeader)?.key;
  const tableBaseConfig = tableInfo?.tableBaseConfig;
  const updateCellParams = tableBaseConfig?.updateCellParams;
  let minDate = "";
  let maxDate = "";
  if (actualProjectMilestoneId) {
    minDate = await archService.queryStartDateByInstance(projectId, actualProjectMilestoneId);
    maxDate = await archService.queryEndDateByInstance(projectId, actualProjectMilestoneId);
  }

  GanttAddExistingWindow.popup(
    {
      projectId,
      minDate,
      maxDate,
      title: updateCellParams?.title || "",
      stepKeys: [...(updateCellParams?.stepKeys || [])],
      moreBtnCondition: updateCellParams?.moreBtnCondition
    },
    async ({ success, result }) => {
      if (!success) return;
      const { startTime, endTime, startTimeLineId, endTimeLineId, modelIds } = result;
      archService
        .updateTableCell({
          projectId,
          add: true,
          dataType: row.dataType,
          startDate: startTime,
          endDate: endTime,
          startTimeLineId,
          endTimeLineId,
          instanceId: tableInfo?.tableId || "",
          isMultiplicity: true,
          key: "ActualResourcesDeployment",
          rowId: tableInfo?.rowId || "",
          columnId: row.key,
          value: modelIds
        })
        .finally(() => {
          GanttAddExistingWindow.done();
        });
    }
  );
};

const handleRemove = async () => {
  if (!selectedModelId.value) {
    return;
  }
  const row = props.row;
  const tableInfo = props.tableInfo;
  const projectId = app.activeProject!.id;
  await archService.updateTableCell({
    projectId,
    add: false,
    dataType: row.dataType,
    startDate: "",
    startTimeLineId: "",
    instanceId: tableInfo?.tableId || "",
    isMultiplicity: true,
    key: "ActualResourcesDeployment",
    rowId: tableInfo?.rowId || "",
    columnId: row.key,
    value: [selectedModelId.value]
  });
  selectedModelId.value = "";
};

function handleClickItem(item: { id: string }) {
  selectedModelId.value = item.id;
}
</script>
<style lang="scss" scoped>
.v-actual-resources-deployment {
  // height: 100%;
  ._selected {
    color: var(--background-color-active);
  }
  .is-disabled {
    filter: grayscale(100%) opacity(50%);
    cursor: not-allowed !important;
  }
  ._list_scroll {
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
  }
  .horizontal {
    height: 24px;
    width: 100%;
    padding-right: 30px;
    padding-left: 11px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 24px;
    .value-item {
      display: inline-block;
      height: 16px;
      margin-right: 10px;
      line-height: 16px;
      img {
        margin-right: 6px;
        line-height: 16px;
        vertical-align: middle;
      }
      span {
        line-height: 14px;
        vertical-align: middle;
      }
    }
    .add-btn {
      line-height: 1;
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50%);
    }
  }
}
</style>
